<template>
    <div class="mine">
        我的
        <!-- 使用辅助函数方式操作子模块数据 -->
        <p>usermodule中的数据:{{ userinfo.name }}--{{ userinfo.age }}</p>
        <p>usermodule中的getters:{{ doubleAge }}</p>
        <p>
            <button @click="addAge"> 同步方法 age+1</button>
            <button @click="addAgeAsync"> 异步方法 age+1</button>
        </p>
    </div>
</template>

<script>
import { mapActions, mapMutations, mapGetters, mapState } from 'vuex';
export default {
    name: 'mine',
    data() {
        return {

        };
    },
    created() {
        console.log('mine=created');
    },
    computed: {
        ...mapState('usermodule', ['userinfo']),
        ...mapGetters('usermodule', ['doubleAge'])
    },
    methods: {
        ...mapMutations('usermodule', ['addAge']),
        ...mapActions('usermodule', ['addAgeAsync'])
    }



}

</script>
<style scoped>
.mine {
    height: 100%;
    width: 100%;
    background-color: purple;
}
</style>